{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/MyLife_CSS.css' %}">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;

            background-image: url("{{ MEDIA_URL }}{{ user_profile.background_image }}");
            background-size: cover;
        }

        .celebrity-container {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            /* 横向滚动条，适应多个卡片 */
        }

        .celebrity-card {
            margin: 20px;
            text-align: center;
        }

        .celebrity-image {
            max-width: 150px;
            max-height: 200px;
            border-radius: 50%;
        }

        .director-container {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            /* 横向滚动条，适应多个卡片 */
        }

        .director-card {
            margin: 20px;
            text-align: center;
        }

        .director-image {
            max-width: 150px;
            max-height: 200px;
            border-radius: 50%;
        }

        .added-element {

            padding: 20px;
        }

        .result-container {
            display: flex;
        }

        .col-md-6, .col-md-5 {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px;
        }

        .col-md-6 {
            flex: 1; /* 使 div2_1 占据可用空间的 1/2 */
        }

        .added-element {
            background-color: whitesmoke;
            padding: 20px;
            margin-bottom: 10px;
        }


    </style>
</head>

<body>
<nav class="navbar navbar-expand-lg fixed-top navbar-light">
    <a href="#" class="btn btn-lg" onclick="goBack()">返回</a>
</nav>
<br>
<div class="profile-container" id="main">
    {% block content %}
        <div class="row  result-container" id="main">
            <h2>搜索结果: "{{ key }}"</h2>

            <div class="row">
                {% for movie in movies %}
                    <script>
                        function createMovieElement() {
                            // 图片参数转为string
                            const movieImageString = " {{ movie.images }}";
                            const decodedMovieImage = new DOMParser().parseFromString(`<!DOCTYPE html><body>${movieImageString}`, 'text/html').body.textContent;
                            const movieImageData = JSON.parse(decodedMovieImage.replace(/'/g, "\"")); // 替换单引号为双引号

                            {#<a href="{% url 'movies_details' movie.movie_id %}" class="btn btn-primary">查看详情</a>#}


                            const container = document.getElementById('main');

                            // 创建并追加 div2_1
                            const div2_1 = document.createElement('div');
                            div2_1.className = 'col-md-10 added-element';
                            div2_1.style.fontSize = '30px';
                            container.appendChild(div2_1);

                            // 创建并追加 div2_2
                            const div2_2 = document.createElement('div');
                            div2_2.className = 'col-md-3 added-element';

                            const imageElement = document.createElement('img');
                            const linkElement = document.createElement('a');

                            imageElement.src = movieImageData["small"];
                            imageElement.style.margin="10px";
                            imageElement.style.borderRadius = "10px";
                            linkElement.href = "{% url 'movies_details' movie.movie_id %}"
                            linkElement.textContent = "{{ movie.title }}";
                            linkElement.style.fontSize = '25px';
                            linkElement.style.color = ' black';
                            linkElement.style.textDecoration = 'none';
                            div2_1.append(imageElement)
                            div2_1.append(linkElement)
                            // 将子元素添加到父元素中
                            div1_1.appendChild(div2_1);
                            div1_1.appendChild(div2_2);

                            // 将新元素追加到容器中
                            document.getElementById('main').appendChild(div1_1);

                        }

                        // 在每次迭代时调用函数
                        createMovieElement();
                    </script>
                    </div>
                {% empty %}
                    <p>没有找到相关电影。</p>
                {% endfor %}

        </div>
        </div>
    {% endblock %}


</div>
<script>
    // JavaScript 函数，用于返回上一页
    function goBack() {
        window.history.back();
    }
</script>

</body>

</html>


